import { useState, useEffect, useLayoutEffect } from "react";
// import ReactDOM from "react-dom";

// function App() {
//   const [count, setCount] = useState(0);

//   // 组件挂载完成和更新完成之后都会执行
//   useEffect(() => {
//     console.log("组件挂载完成和更新完成之后都会执行");
//   });

//   // 组件挂载完成之后执行
//   useEffect(() => {
//     console.log("组件挂载完成之后执行");
//   }, []);

//   // 组件被卸载之前执行
//   useEffect(() => {
//     return () => {
//       console.log("组件被卸载了");
//     };
//   });

//   return (
//     <div>
//       <span>{count}</span>
//       <button onClick={() => setCount(count + 1)}>+1</button>
//       <button onClick={() => ReactDOM.unmountComponentAtNode(document.getElementById("root"))}>
//         卸载组件
//       </button>
//     </div>
//   );
// }
// export default App;

// useLayoutEffect

function App() {
  const [value, setValue] = useState(0);

  // useEffect(() => {
  //   document.querySelector("#x").innerText = `value: 1000`;
  // }, [value]);

  useLayoutEffect(() => {
    document.querySelector("#x").innerText = `value: 1000`;
  }, [value]);

  return <div id="x">value: {value}</div>;
}

export default App;
